import * as React from 'react';
import { Input,Button } from 'antd'
import { addBanner } from '@/services/banner';
import { history } from 'umi'
export interface IBannerAddProps {
}

function BannerAdd (props: IBannerAddProps) {
  const linkRef = React.useRef('link')
  const altRef = React.useRef('alt')
  const hideRef = React.useRef('hide')
  const fileRef = React.useRef('file')
  const imgRef = React.useRef('img')
  return (
    <div>
      <input ref = {linkRef} style={{ width: 200 }} placeholder = "请输入link" />
      <input ref = {altRef} style={{ width: 200 }} placeholder = "请输入alt" />
      <input ref = {fileRef} type="file" multiple onChange = {() => {
        const file = fileRef.current.files[0]
        const img = imgRef.current
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function () {
          img.src = this.result
          hideRef.current.value = this.result
        }
      }}/>
      <input type="text" ref = { hideRef } hidden/>
      <img src = "" ref = {imgRef}></img>
      <Button onClick = {
        () => {
          const link = linkRef.current.value
          const alt = altRef.current.value
          const img = hideRef.current.value
          console.log({
            link, alt, img
          })
          addBanner({
            link, alt, img
          }).then(() => {
            history.push('/banner/list')
          })
        }
      }>上传</Button>
    </div>
  );
}
export default BannerAdd
